<template>
	<view class="container page-shopcart">
		<view class="page-shopcart-container">
			<!-- #ifdef APP-PLUS -->
			<view class="top_view"></view>
			<!-- #endif -->
			<view class="app-header fixed-top">
				<!-- #ifndef MP-WEIXIN -->
				<view class="app-title">购物车</view>
				<!-- #endif -->
				<view class="app-header-action" v-if="goodsListLength > 0">
					<label v-if="isEdit" @tap="handleCheckALL" class="action-all">
						<checkbox :checked="checkedAll" />
						全选
					</label>
					<view @click="handleEdit">{{ isEditTitle }}</view>
				</view>
			</view>
			<view class="shopcart-content" v-if="goodsListLength > 0">
				<view class="module-shop">
					<view
						class="shop-content"
						v-for="(item, index) in goodsList"
						:key="item.id"
					>
						<view class="shop-header">
							<checkbox
								:checked="item.checked"
								@tap="handleShopCheck($event, index)"
							/>
							{{ item.shop }}
						</view>
						<view class="shop-product">
							<view
								class="item"
								v-for="(product, productindex) in item.product"
								:key="product.id"
							>
								<checkbox
									:checked="product.checked"
									@tap="
										handleProductCheck($event, product, productindex, index)
									"
								/>
								<view class="product-content">
									<image
										class="media-object"
										src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/108272/8/9220/359926/5e71e059Ef5f8268a/258098ba96ce9cd2.jpg!q80.dpg.webp"
										mode="widthFix"
									></image>
									<view class="media-content">
										<view class="media-title">{{ product.title }}</view>
										<view class="media-tips">{{ product.tips }}</view>

										<view class="item-price">
											<span class="price-count">￥{{ product.price }}</span>
											<numberBox
												class="item-number"
												:min="1"
												:value="product.count"
												:index="index"
												:pIndex="productindex"
												@change="handleNumber"
											></numberBox>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="module-footer fixed-bottom">
					<view class="module-footer-row">
						<view class="item" style="padding-left: 12px;" v-if="!isEdit">
							<label @tap="handleCheckALL">
								<checkbox :checked="checkedAll" />
								全选
							</label>
						</view>
						<view class="item" v-if="!isEdit">
							<view class="item-num">
								<view class="total">
									合计:
									<text class="money">￥{{ allTotal.price }}</text>
								</view>
							</view>
							<button class="settlement-btn" type="main" @tap="handleBooking">
								去结算({{ allTotal.count }})
							</button>
						</view>
						<button
							v-else
							class="btn-delete"
							type="danger"
							@click="handleDelete"
						>
							删除
						</button>
					</view>
				</view>
			</view>
			<!-- 购物车无商品显示 -->
			<view class="module-none" v-else>购物车空空如也</view>
			<!-- 购物车无商品显示-end -->
		</view>
	</view>
</template>

<script>
import numberBox from '../components/number-box/number-box.vue';
export default {
	components: {
		numberBox,
	},
	data() {
		return {
			isEditTitle: '编辑',
			isEdit: false,
		};
	},
	computed: {
		goodsList() {
			return this.$store.getters.goodsList;
		},
		goodsListLength() {
			return this.$store.getters.goodsListLength;
		},
		allTotal() {
			return this.$store.getters.allTotal;
		},
		checkedAll: {
			get: function () {
				return this.checkedCount === this.goodsListLength;
			},
			set: function (value) {
				this.$store.commit('allCheck', value);
			},
		},
		checkedCount() {
			return this.$store.getters.goodsList.filter(function (item) {
				return item.checked;
			}).length;
		},
	},
	onLoad() {
		// const aa = [
		// 	{
		// 		shop: '京东商铺合作店',
		// 		id: 1,
		// 		checked: true,
		// 		product: [
		// 			{
		// 				title: '五常大米300g',
		// 				price: 30,
		// 				thumb: '',
		// 				count: 1,
		// 				tips: '很新鲜',
		// 				id: 100,
		// 				checked: true,
		// 			},
		// 			{
		// 				title: '花生300g',
		// 				price: 40,
		// 				thumb: '',
		// 				count: 1,
		// 				tips: '很新鲜',
		// 				id: 150,
		// 				checked: true,
		// 			},
		// 			{
		// 				title: '花生油300g',
		// 				price: 40,
		// 				thumb: '',
		// 				count: 1,
		// 				tips: '很新鲜',
		// 				id: 200,
		// 				checked: true,
		// 			},
		// 			{
		// 				title: '大豆300g',
		// 				price: 40,
		// 				thumb: '',
		// 				count: 1,
		// 				tips: '很新鲜',
		// 				id: 250,
		// 				checked: true,
		// 			},
		// 		],
		// 	},
		// 	{
		// 		shop: '微企商铺一号店',
		// 		id: 2,
		// 		checked: true,
		// 		product: [
		// 			{
		// 				title:
		// 					'北海道进口海鱼北海道进口海鱼北海道进口海鱼北海道进口海鱼新鲜进口三文鱼新鲜进口三文鱼新鲜进口三文鱼',
		// 				price: 50,
		// 				thumb: '',
		// 				count: 1,
		// 				tips: '当天送达',
		// 				id: '200',
		// 				checked: true,
		// 			},
		// 		],
		// 	},
		// 	{
		// 		shop: '广州沃尔玛商铺',
		// 		id: 3,
		// 		checked: true,
		// 		product: [
		// 			{
		// 				title: '新鲜进口三文鱼新鲜进口三文鱼新鲜进口三文鱼',
		// 				price: 100,
		// 				thumb: '',
		// 				count: 1,
		// 				tips: '当天送达',
		// 				id: '300',
		// 				checked: true,
		// 			},
		// 		],
		// 	},
		// ];
		// uni.setStorageSync('goodsList', JSON.stringify(aa));
	},

	methods: {
		handleCheckALL() {
			this.checkedAll = !this.checkedAll;
		},
		findPosition(id) {
			return this.goodsList.findIndex((item) => {
				return item.id === id;
			});
		},
		// 商铺勾选按钮
		handleShopCheck(e, index) {
			const { checked } = this.goodsList[index];
			this.$store.commit('shopCheck', {
				index: index,
				key: 'checked',
				value: !checked,
			});
		},
		// 商品勾选按钮
		handleProductCheck(e, item, productIndex, index) {
			this.$store.commit('productCheck', {
				productIndex: productIndex,
				index: index,
				key: 'checked',
				value: !item.checked,
			});
		},
		handleNumber(e) {
			this.$store.commit('productCheck', {
				productIndex: e.pIndex,
				index: e.index,
				key: 'count',
				value: e.value,
			});
			this.$store.commit('productCheck', {
				productIndex: e.pIndex,
				index: e.index,
				key: 'checked',
				value: true,
			});
		},

		handleEdit() {
			if (this.isEdit === true) {
				this.isEdit = false;
				this.isEditTitle = '编辑';
			} else {
				this.isEdit = true;
				this.isEditTitle = '完成';
			}
		},
		handleDelete() {
			if (this.allTotal.checkCount <= 0) {
				uni.showToast({
					title: '请选择删除的商品',
					duration: 1000,
					icon: 'none',
				});
				return false;
			}
			const tips = '确认删除这' + this.allTotal.checkCount + '种商品吗';
			uni.showModal({
				title: '',
				content: tips,
				success: (res) => {
					if (res.confirm) {
						this.$store.commit('deleteGoods');
					} else if (res.cancel) {
						// window.console.log('用户点击取消');
					}
				},
			});
		},
		handleBooking() {
			if (this.allTotal.count > 0) {
				uni.removeStorageSync('detailsBooking');
				uni.navigateTo({
					url: '../order/booking/index',
				});
			} else {
				uni.showToast({
					title: '请选择购买的商品',
					duration: 1000,
					icon: 'none',
				});
				return false;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
/*  #ifdef  APP-PLUS  */
@include mobileStatusBar(#fff);
.page-shopcart {
	padding: var(--status-bar-height) 0 0;
}
/*  #endif  */

.page-shopcart-container {
	padding: 92rpx 0 110rpx;
}

.app-header {
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	background: #fff;
	display: flex;
	justify-content: space-between;
	/* #ifdef MP-WEIXIN */
	justify-content: flex-end;
	/* #endif */
	padding: $uni-spacing-base $uni-spacing-lg;
	z-index: 99;
	@include borderCreator(bottom, solid, #ddd);

	.action-all {
		margin-right: $uni-spacing-lg;
		color: $uni-color-main;
	}
	.app-title {
		font-size: $uni-font-size-lg;
		font-weight: bold;
	}
}

.app-header-action {
	display: flex;
}
.module-footer {
	z-index: 99;
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	&:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		content: '';
		background: #ddd;
	}
}

uni-checkbox {
	margin-right: 4rpx;
}

.module-shop {
	background: $uni-bg-color-grey;
	.shop-content {
		background: #fff;
		padding: $uni-spacing-base;
		margin: 0 0 $uni-spacing-base;
	}

	.shop-header {
		padding: $uni-spacing-sm 0;
		font-size: $uni-font-size-base;
	}

	.item {
		display: flex;
		padding: 20rpx 0;
		@include borderCreator(bottom, solid, $uni-border-color-grey);

		&:last-child {
			border-bottom: none;
		}
	}

	.media-content {
		flex: 1;
		padding-left: 18rpx;
	}

	.product-content {
		display: flex;
		width: 100%;
	}

	.media-object {
		width: 120rpx;
		height: auto;
	}

	.media-title {
		margin: 0 0 $uni-spacing-sm;
		line-height: 36rpx;
		@include textEllipsis(2);
	}
	.media-tips {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin: 0 0 $uni-spacing-lg;
	}
	.item-price {
		position: relative;
	}

	.price-count {
		color: $uni-text-price;
		font-size: $uni-font-size-base;
	}

	.item-number {
		float: right;
	}
}

.module-footer-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;

	.item {
		display: flex;
		align-items: center;
	}

	.item-num {
		margin-right: 18rpx;
	}

	.settlement-btn {
		color: #fff;
		border-radius: 0;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		width: 200rpx;
	}

	.btn-delete {
		background: #f04844;
		color: #fff;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		border-radius: 0;
	}

	.total {
		font-size: 30rpx;
		color: #6f6f6f;
		line-height: 30rpx;
	}

	.details {
		font-size: 25rpx;
		color: $uni-text-color-grey;
	}

	.checkbox-icon {
		margin-left: 20rpx;
	}

	.money {
		color: #ff0000;
	}
}

.module-none {
	display: block;
	text-align: center;
	padding: 40rpx;
	color: #c8c7cc;
	font-size: 30rpx;
}
</style>
